<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="调整" :visible.sync="dialogVisible"
        @close="resetForm('justClipHzRef')" width="400px">
        <el-form label-position="top" label-width="auto" size="medium" :hide-required-asterisk='true'
            :model="justClipHzForm" :rules="justClipHzRules" ref="justClipHzRef" v-loading="loading">
            <el-form-item label="调整对象">
                <ul class="sche_info">
                    <li class="flexbox flexcenter flexbetween">
                        <span>品牌/产品</span>
                        <span class="sche_text">{{ brand_name }} - {{ product_name }}</span>
                    </li>
                    <li class="flexbox flexcenter flexbetween">
                        <span>业务场景</span>
                        <span class="sche_text" v-if="business_scene == 1">短视频原创</span>
                        <span class="sche_text" v-else-if="business_scene == 2">短视频混剪</span>
                        <span class="sche_text" v-else-if="business_scene == 3">直播素材</span>
                        <span class="sche_text" v-else-if="business_scene == 4">直播直投</span>
                        <span class="sche_text" v-else-if="business_scene == 5">短视频</span>
                        <span class="sche_text" v-else-if="business_scene == 6">直播</span>
                    </li>
                </ul>
            </el-form-item>
            <el-form-item label="其余拍摄人" prop="executor_uid">
                <el-select v-model="justClipHzForm.executor_uid" multiple collapse-tags placeholder="请选择其余拍摄人"
                    style="width:100%">
                    <el-option :label="item.nickname" :value="item.id" v-for="item in hzShotList" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="剪辑" prop="editor_uid">
                <el-select v-model="justClipHzForm.editor_uid" placeholder="请选择剪辑" style="width:100%">
                    <el-option :label="item.nickname" :value="item.id" v-for="item in hzClipList" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="拍摄" prop="photographer_uid">
                <el-select v-model="justClipHzForm.photographer_uid" placeholder="请选择拍摄" style="width:100%">
                    <el-option :label="item.nickname" :value="item.id" v-for="item in hzShotList" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="截止日期" prop="closing_date">
                <el-select v-model="justClipHzForm.closing_date" filterable placeholder="请选择截止日期" style="width:100%">
                    <el-option label="周一" :value="1"></el-option>
                    <el-option label="周二" :value="2"></el-option>
                    <el-option label="周三" :value="3"></el-option>
                    <el-option label="周四" :value="4"></el-option>
                    <el-option label="周五" :value="5"></el-option>
                    <el-option label="周六" :value="6"></el-option>
                    <el-option label="周日" :value="7"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="脚本信息" prop="script_id">
                <el-select v-model="justClipHzForm.script_id" placeholder="请选择脚本信息" style="width:100%">
                    <el-option :label="item.material_name" :value="item.id" v-for="item in scriptList" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('justClipHzRef')" class="el-button-width" size="small">取 消</el-button>
            <el-button type="primary" @click="submitForm('justClipHzRef')" class="el-button-width" size="small"
                :disabled='disabled' :loading="disabled">提 交</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            disabled: false,
            dialogVisible: false,
            brand_name: "",
            product_name: "",
            business_scene: "",
            material_finish: null,
            optimiList: [], //优化师列表
            hzClipList: [],//剪辑
            hzShotList: [],//拍摄
            scriptList: [],
            justClipHzForm: {
                id: "",
                closing_date: "",
                executor_uid: "",
                script_id: "",
                editor_uid: "",
                photographer_uid: '',
            },
            justClipHzRules: {
                executor_uid: [
                    {
                        required: true,
                        message: "请选择执行人",
                        trigger: "blur",
                    },
                ],
                editor_uid: [
                    {
                        required: true,
                        message: "请选择剪辑",
                        trigger: "blur",
                    },
                ],
                closing_date: [
                    {
                        required: true,
                        message: "请选择截止日期",
                        trigger: "blur",
                    },
                ],
                // script_id: [
                //     {
                //         required: true,
                //         message: "请选择脚本信息",
                //         trigger: "blur",
                //     },
                // ],
            },
        };
    },

    created() {
        this.$bus.on("justClipHz", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.justClipHzForm.id = value.id;
            this.year = value.year;
            this.week = value.week;
            this.justClipHzForm.closing_date = value.closing_date;
            this.justClipHzForm.executor_uid = value.executor_uid;
            this.justClipHzForm.photographer_uid = value.photographer_uid;
            this.justClipHzForm.script_id = value.script_id;
            this.justClipHzForm.editor_uid = value.editor_uid;
            this.brand_name = value.brand_name;
            this.product_name = value.product_name;
            this.business_scene = value.business_scene;
            this.material_finish = value.material_finish;
            // this.getOptimization();
            this.gethzClipList()
            this.gethzShotList()
            this.getScriptList()
        });
    },
    beforeDestroy() {
        this.$bus.off("justClipHz");
    },
    methods: {
        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.material_finish == 1) {
                        this.$confirm("需求发生变化，提交后已提交的素材将被清除，确定吗？", "清除", {
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                        })
                            .then(async () => {
                                this.submitJust()
                            })
                            .catch(() => { });
                    } else {
                        this.submitJust()
                    }
                } else {
                    this.disabled = false;
                    return false;
                }
            });
        },

        async submitJust() {
            this.disabled = true;
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/clipAdjust",
                this.justClipHzForm
            );
            if (res.code !== 200) {
                this.disabled = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "调整成功",
                    type: "success",
                });
                this.disabled = false;
                this.resetForm('justClipHzRef');
                this.$parent.getDataList(this.$parent.setpage);
            }
        },

        // 获取优化师列表
        // async getOptimization() {
        //     const { data: res } = await this.$http.post(
        //         "adminapi/company/userList",
        //         {
        //             department: 0,
        //             page: 1,
        //             limit: 0,
        //             function: 0,
        //         }
        //     );
        //     if (res.code !== 200) {
        //         this.$message.error(res.msg);
        //         return;
        //     } else {
        //         this.optimiList = res.data.list;
        //     }
        // },

        // 获取杭州剪辑人员列表
        async gethzClipList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzEditorList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzClipList = res.data;
            }
        },

        // 获取杭州拍摄人员列表
        async gethzShotList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzPhotographerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzShotList = res.data;
            }
        },

        //获取脚本列表
        async getScriptList() {
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/scriptList",
                {
                    year: this.year,
                    week: this.week,
                    page: 1,
                    limit: 20,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.scriptList = res.data.list
            }
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped>
.sche_info {
    font-size: 14px;
    color: #616c85;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 12px;
    padding: 12px;
}

.sche_info li {
    height: 36px;
}

.sche_text {
    color: #17233d;
}
</style>

